<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta http-equiv="keywords" content="关键字,关键字,关键字"/>
  <meta http-equiv="pragma" content="no-cache"/>
  <meta http-equiv="cache-control" content="no-cache"/>
  <meta http-equiv="expires" content="0"/>
  <meta name="description" content="页面描述不超过150个字符"/>
  <meta name="Author" content="页面作者"/>
  <meta name="renderer" content="webkit"/>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
  <link rel="shortcut icon" href="../public/images/favicon.ico" type="image/x-icon" >
  <link rel="stylesheet" type="text/css" href="../public/layui/dist/css/layui.css"/>
  <link rel="stylesheet" href="../public/stylesheets/gx_main.min.css" />
  <link rel="stylesheet" type="text/css" href="../public/iconfont/iconfont.css">
  <!--[if lt IE 9]>
  <script src="../public/html5shiv/dist/html5shiv.min.js"></script>
  <script src="../public/respond/dest/respond.min.js"></script>
  <![endif]-->
  <script src="../public/jquery/dist/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="../public/layui/dist/layui.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript" src="../public/highcharts-5.0.14/code/highcharts.js"></script>
  <!--mine-->
  <script src="../public/javascripts/gx_main.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body class="gx_index">
<div class="layui-layout layui-layout-admin">

  <!--头部-->
  <div class="layui-header">
    <div class="layui-logo">
      <div class="gx_headerLogo"><img src="../public/images/logo.png" alt=""></div>
      <div class="gx_headerLogoText"><img src="../public/images/logo_text.png" alt=""></div>
    </div>
    <ul class="layui-nav layui-layout-right" id="gx_headerList">
      <li class="layui-nav-item"><a href="javascript:;"><span class="iconfont icon-gx_yuan"></span><br/>RS232</a></li>
      <li class="layui-nav-item"><a href="javascript:;"><span class="iconfont icon-gx_yuan active"></span><br/>RS485</a></li>
      <li class="layui-nav-item"><a href="javascript:;"><span class="iconfont icon-gx_yuan"></span><br/>CAN</a></li>
      <li class="layui-nav-item"><a href="javascript:;"><span class="iconfont icon-gx_yuan"></span><br/>NET</a></li>
    </ul>
  </div>

  <!--导航-->
  <div class="layui-side layui-bg-lightBlue" id="gx_nav">
    <div class="layui-side-scroll">
      <div class="gx_navTitle">采集数据展示</div>
      <ul class="layui-nav layui-nav-tree" lay-filter="test">
        <li class="layui-nav-item">
          <a href="javascript:;" frame="sub_protocolConfig.html" id="xypz">
            <span class="iconfont icon-gx_peiZhi"></span><span class="gb_navText">协议配置</span>
          </a>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;" frame="sub_equipStatus.html" id="sbzt">
            <span class="iconfont icon-gx_zhuangTai"></span><span class="gb_navText">设备状态</span>
          </a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;" frame="sub_equipConfig.html" id="sbpz">设备配置</a></dd>
            <dd><a href="javascript:;" url="frame_RS232.html" value="1" text="RS232连接信息">RS232连接信息</a></dd>
            <dd><a href="javascript:;" url="frame_RS485.html" value="1" text="RS485连接信息">RS485连接信息</a></dd>
            <dd><a href="javascript:;" url="frame_CAN.html" value="1" text="CAN连接信息">CAN连接信息</a></dd>
            <dd><a href="javascript:;" url="frame_web.html" value="1" text="网络连接信息">网络连接信息</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;"><span class="iconfont icon-gx_chiLun"></span><span class="gb_navText">系统设置</span></a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;" frame="sub_userManage.html" id="yhgl">用户管理</a></dd>
            <dd><a href="javascript:;" url="frame_factorySettings.html" value="2">恢复出厂设置</a></dd>
            <dd><a href="javascript:;" frame="sub_changepwd.html" id="mmxg">密码修改</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;" frame="sub_dataManageSet.html" id="sjgl">
            <span class="iconfont icon-gx_shuJu"></span><span class="gb_navText">数据管理</span>
          </a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;" frame="sub_dataBackupRestore.html" id="sjbfyhy">数据备份与还原</a></dd>
            <dd><a href="javascript:;" frame="sub_dataSync.html" id="sjtb">数据同步</a></dd>
            <dd><a href="javascript:;" frame="sub_dataDownload.html" id="sjxz">数据下载</a></dd>
          </dl>
        </li>
      </ul>
    </div>
  </div>

  <!--右侧面板-->
  <div class="layui-body" id="gx_body">
    <div class="layui-tab" lay-filter="gx_frame" lay-allowclose="true">
      <ul class="layui-tab-title" id="gx_tabContent"></ul>
      <div class="layui-tab-content"></div>
    </div>
  </div>
</div>


<script>
  layui.use(['element','layer','jquery'], function(){
    var element = layui.element,$ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句

    //设置sub_页面所在iframe的高度
    var windowH = $(window).height();
    var frameH = (windowH-132)<500?500:windowH-132;

    //点击导航调用页面
    $('#gx_nav a').on("click",function(){
      var frame = $(this).attr('frame'), url = $(this).attr('url'),
        val = $(this).attr("value"), text = $(this).text(),
        id= $(this).attr("id");
      //判断是否存在子页面
      if(frame){
        //获取已存在的tab标签
        var li = $("#gx_tabContent li"),state = true;
        for(var i=0;i<li.length;i++){
          if($(li[i]).attr("lay-id") == id){
            //如果tab已经存在则跳转到相应tab
            element.tabChange('gx_frame', id);
            state= false;
            break;
            return;
          }
        }
        if(state){
          element.tabAdd('gx_frame',{
            title:text,
            content: '<iframe src="'+frame+'" class="contentForm" height="'+frameH+'" frameborder="0" width="100%"></iframe>',
            id:id
          });
          element.tabChange('gx_frame', id);
        }
      //判断是否存在弹框
      }else if(url){
        if(val == 1){
          layer.open({
            type: 2               //此处以iframe举例
            ,skin: 'gx_layer'     //弹出框皮肤
            ,title: '<span class="iconfont icon-gx_wangLuo"></span>'+text
            ,area: ['550px', '400px']
            ,shade: .5            //遮罩层透明度
            ,maxmin: true         //头部关闭按钮
            ,shadeClose:true      //点击遮罩层取消模态框
            ,content: url
          });
        }else if(val == 2){
          layer.open({
            type: 2               //此处以iframe举例
            ,skin: 'gx_layer'     //弹出框皮肤
            ,title: '<span class="iconfont icon-gx_jingGao"></span>警告'
            ,area: ['450px', '200px']
            ,shade: .5            //遮罩层透明度
            ,maxmin: true         //头部关闭按钮
            ,shadeClose:true      //点击遮罩层取消模态框
            ,content: 'frame_factorySettings.html'
            ,btn: ['确定', '取消'] //按钮
            ,yes: function(){
              layer.alert("ajax提交验证",function () {
                layer.closeAll();
              });
            }
            ,btn2: function(){
              layer.closeAll();
            }
          });
        }
      }else{}
    });
    //初始化选项卡
    $('#gx_nav a').eq(0).trigger("click");
    $('#gx_body li').eq(0).trigger("click");
  });
</script>
</body>
</html>